<template>
    <div>
        <div class="bg-white">
            <div class="main">
                <div class="home-layout-B m-top-70" v-for="(item,index) in serviceList" :key="index">
                    <div class="home-layout-B-left">
                        <img :src="$imgPath(item.pc)">
                        <div class="home-layout-B-title blue">
                            {{item.serviceName}}
                            <a class="more" @click="more(item.serviceId)">更多></a>
                        </div>
                        <div class="on-line">
                            <span>在线{{item.serviceOnlineNum}}人</span>
                        </div>
                        <ul class="tag">
                            <li v-for="(itemTag,indexTag) in item.listDict" :key="indexTag" @click="tagClick(item.serviceId,item.listDict,indexTag)">
                                <a :class="itemTag.isActive ? 'tagActive' : ''">{{itemTag.name}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="home-layout-B-right">
                        <div class="recommend-list">
                            <ul>
                                <li v-for="(itemUser,indexUser) in item.userList" :key="indexUser" @click="detailLink(item,itemUser)" v-if="index < 9">
                                    <a>
                                        <div class="recommend-img">
                                            <img :src="$imgPath(itemUser.headImg)">
                                            <label>
                                                <span v-for="(itemUserTag,indexUserTag) in itemUser.userTags" :class="[indexUserTag == 0 ? 'tip2' : 'tip1']" v-if="indexUserTag<2" :key="indexUserTag">{{itemUserTag}}</span>
                                            </label>
                                        </div>
                                        <div class="recommend-view">
                                            <div class="recommend-view-title">
                                                <span>{{itemUser.nickname}}</span>
                                            </div>
                                            <!-- <div class="recommend-view-msg">
                                                <i class="she">{{itemUser.age}}</i>
                                                <label class="price">￥<span>{{itemUser.price}}/</span>{{itemUser.priceUnit}}</label>
                                            </div>
                                            <div class="recommend-view-status">
                                                <label class="game">{{itemUser.division}}</label>
                                                <label class="ok">在线</label>
                                            </div> -->
                                            <div class="recommend-view-status">
                                                <label class="game">{{item.serviceName}}</label>
                                                <label class="priceIndex">￥<span>{{itemUser.price}}/</span>{{itemUser.priceUnit}}</label>
                                                <!-- <label class="ok">{{item.onlineStatus == 0 ? '在线' : '下线'}}</label> -->
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            serviceList:[]
        }
    },
    mounted(){
        this.listByService()
    },
    methods:{
        listByService(serviceId,tagId){
            let params = {
                serviceId : serviceId,
                tagId:tagId
            }
            apiHttp.apiIndex.listByService(params,resp=>{               
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.length; i++){
                        for(let j = 0; j < resp.data[i].listDict.length; j++){
                            resp.data[i].listDict[j].isActive = false
                        }
                    }
                    if(serviceId){
                        for(let i = 0; i < this.serviceList.length; i++){
                            if(this.serviceList[i].serviceId == serviceId){
                                this.serviceList[i].userList = resp.data[0].userList
                            }
                        }
                    }else{
                        this.serviceList = resp.data
                    }
                }
            })
        },
        // 跳转到详情页
        detailLink(item1,item2){
            let routeData = this.$router.resolve({
                name:'detail',
                params:{
                    userId:item2.id
                },
                query:{
                    serviceId:item1.serviceId
                }
            })
            window.open(routeData.href, '_blank')
        },
        tagClick(serviceId,item,index){
            for(let i = 0; i < item.length; i++){
                if(index == i){
                    item[i].isActive = true
                    this.listByService(serviceId,item[i].id)
                }else{
                    item[i].isActive = false
                }
            }
        },
        more(serviceId){
            let routeData = this.$router.resolve({
                name:'playAroundWith',
                query:{
                    id:serviceId
                }
            })
            window.open(routeData.href, '_blank')
        }
    }
}
</script>
<style scoped>
.game{
    width: auto;
}
.recommend-list{
    margin-top: 0;
}
.home-layout-B-left img{
    border-radius: 10px 10px 0 0;
}
.recommend-list .recommend-img img{
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 100%;
}
.tagActive{
    background-color: #db5a59;
    color:#fff;
}
</style>

